<template>
  <div>
    <div>
      <a-form-item label='产品详情' v-bind="formItemLayout">
        <div class="in-editor-panel">
          <quill-editor ref="quillEditor1" v-model="maaFile.maa38" :options="editorOption" @change="onChange">
          </quill-editor>
        </div>
      </a-form-item>

      <a-form-item label='下单须知' v-bind="formItemLayout">
        <div class="in-editor-panel">
          <quill-editor ref="quillEditor2" v-model="maaFile.maa39" :options="editorOption" @change="onChange">
          </quill-editor>
        </div>
      </a-form-item>

      <a-form-item label='规格参数' v-bind="formItemLayout">
        <div class="in-editor-panel">
          <quill-editor ref="quillEditor3" v-model="maaFile.maa40" :options="editorOption" @change="onChange">
          </quill-editor>
        </div>
      </a-form-item>
      <a-form-item label='产品备注' v-bind="formItemLayout">
        <div class="in-editor-panel">
          <quill-editor ref="quillEditor4" v-model="maaFile.maa41" :options="editorOption" @change="onChange">
          </quill-editor>
        </div>
      </a-form-item>
    </div>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import { quillEditor, Quill } from 'vue-quill-editor'
import { ImageExtend, QuillWatch } from 'quill-image-extend-module'
import ImageResize from 'quill-image-resize-module'
import {ImageDrop} from 'quill-image-drop-module'

// import { hasClass } from 'assets/scripts/dom/dom'
Quill.register('modules/ImageExtend', ImageExtend)
Quill.register('modules/ImageResize', ImageResize)
Quill.register('modules/imageDrop', ImageDrop)

const formItemLayout = {
  labelCol: {span: 6},
  wrapperCol: {span: 18}
}
export default {
  name: 'editOthers',
  components: {
    quillEditor
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    toolbarMode: {
      type: Number,
      default: 0
    },
    placeholder: {
      type: String,
      default: '请输入内容'
    },
    height: {
      type: Number,
      default: 170
    },
    imagePath: {
      type: String,
      default: ''
    },
    othersData: {
      type: Object
    }
  },
  data () {
    return {
      formItemLayout,
      maaFile: this.othersData || {},
      toolbars: [
        [
          ['bold', 'italic', 'underline', 'strike'],
          ['blockquote', 'code-block'],
          [{'header': 1}, {'header': 2}],
          [{'list': 'ordered'}, {'list': 'bullet'}],
          [{'script': 'sub'}, {'script': 'super'}],
          [{'indent': '-1'}, {'indent': '+1'}],
          [{'direction': 'rtl'}],
          [{'size': ['small', false, 'large', 'huge']}],
          [{'header': [1, 2, 3, 4, 5, 6, false]}],
          [{'font': []}],
          [{'color': []}, {'background': []}],
          [{'align': []}],
          ['clean'],
          ['link', 'image', 'video']
        ],
        [
          ['bold', 'italic', 'underline'],
          ['blockquote', 'code-block'],
          [{'list': 'ordered'}, {'list': 'bullet'}],
          [{'header': [1, 2, 3, 4, 5, 6, false]}],
          [{'color': []}, {'background': []}],
          [{'align': []}],
          ['link', 'image', 'video']
        ],
        [
          ['bold', 'italic', 'underline'],
          ['blockquote', 'code-block'],
          [{'list': 'ordered'}, {'list': 'bullet'}],
          [{'color': []}, {'background': []}],
          ['insert']
        ]
      ],
      editorOption: {
        modules: {
          imageDrop: true,
          ImageResize: {},
          ImageExtend: {
            loading: true,
            name: 'image',
            size: 10,
            action: ``,
            response: (res) => {
              console.log(res)
              return res.data
            }
          },
          toolbar: {
            container: [],
            handlers: {
              'image': function () {
                console.log(this.quill.id)
                QuillWatch.emit(this.quill.id)
              }
            }
          }
        },
        placeholder: this.placeholder
      }
    }
  },
  computed: {
    editor1 () {
      return this.$refs.quillEditor1.quill
    },
    editor2 () {
      return this.$refs.quillEditor2.quill
    },
    editor3 () {
      return this.$refs.quillEditor3.quill
    },
    editor4 () {
      return this.$refs.quillEditor4.quill
    }
  },
  watch: {
    'othersData' (val) {
      this.maaFile = val
    },
    'maaFile' (val) {
      this.$emit('update:othersData', val)
    },
    // 监听父组件传入的内容
    value (newVal) {
      console.log(newVal)
      this.$nextTick(() => {
        this._listenerImage()
      })
      if (newVal === this.maaFile.maa38) {
        console.log(newVal)
        return false
      }
      // 传入的内容不等于编辑器自身内容，则更新
      this.maaFile.maa38 = newVal
      if (newVal === this.maaFile.maa39) {
        console.log(newVal)
        return false
      }
      // 传入的内容不等于编辑器自身内容，则更新
      this.maaFile.maa39 = newVal
      if (newVal === this.maaFile.maa40) {
        console.log(newVal)
        return false
      }
      // 传入的内容不等于编辑器自身内容，则更新
      this.maaFile.maa40 = newVal
      if (newVal === this.maaFile.maa41) {
        console.log(newVal)
        return false
      }
      // 传入的内容不等于编辑器自身内容，则更新
      this.maaFile.maa41 = newVal
    },
    'maa38' () {
      this._listenerImage()
    },
    'maa39' () {
      this._listenerImage()
    },
    'maa40' () {
      this._listenerImage()
    },
    'maa41' () {
      this._listenerImage()
    }
  },
  mounted () {
    // 设置编辑器高度
    this.editor1.container.style.height = `${this.height}px`
    this.editor2.container.style.height = `${this.height}px`
    this.editor3.container.style.height = `${this.height}px`
    this.editor4.container.style.height = `${this.height}px`
  },
  created () {
    // 指定工具栏
    this.editorOption.modules.toolbar.container = this.toolbars[this.toolbarMode]
  },
  methods: {
    // 显示宽度修改框
    _showWidthBox (event) {
      console.log(event)
      // 获取当前图片对象
      let currentImg = event.target
      // 弹出宽度输入框
      this.$prompt('请输入宽度', '提示', {
        inputValue: currentImg.width,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({value}) => {
        console.log(value)
        // 赋值新宽度
        currentImg.width = value
      }).catch(() => {})
    },
    // 监听图片点击
    _listenerImage () {
      // 获取DOM对象
      let editor = document.getElementsByClassName('ql-editor')[0]
      let img = editor.getElementsByTagName('img')
      // 非空验证
      if (img.length === 0) {
        return
      }
      for (let i = 0; i < img.length; i++) {
        let currentImg = img[i]
        console.log(currentImg)
        // 绑定且防止重复绑定
        currentImg.removeEventListener('dblclick', this._showWidthBox, false)
        currentImg.addEventListener('dblclick', this._showWidthBox, false)
      }
    },
    onChange () {
      // 告知父组件内容发生变化
      this.$emit('input', this.maaFile.maa38)
      this.$emit('input', this.maaFile.maa39)
      this.$emit('input', this.maaFile.maa40)
      this.$emit('input', this.maaFile.maa41)
    }
  }
}
</script>

<style lang="less" scoped>

</style>
